<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :router="true"
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
        <template v-for="item in menudata">
          <el-menu-item v-if="!item.children" :index="item.path">
            {{item.label}}
          </el-menu-item>
          <el-sub-menu v-else :index="item.id" >
            <template #title>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item v-for="sonItem in item.children" :index="sonItem.path">
              {{sonItem.label}}
            </el-menu-item>
          </el-sub-menu>
        </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="member">
            欢迎您：{{username}}
          </div>
          <el-button @click="exitFn">退出登录</el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { reactive,ref } from "vue"
import { useRouter } from "vue-router";
import getMenus from "../../grants/menudata";
import getRoutes,{clearCurrentRoutes} from "../../grants/router"
import {useRouteStore} from "../../piniaStore/index"
const menudata = reactive(getMenus())
const routeStore = useRouteStore()
if(!routeStore.isAddRoute){
  getRoutes()
}


const $router = useRouter()


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};


const username = ref(sessionStorage.getItem("username"))

const exitFn = () =>{
  sessionStorage.clear()
  clearCurrentRoutes();//清除当前用户的路由配置
  routeStore.setIsAddRoute(false)
  $router.push("/Login")
}
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-aside {
  background-color: rgb(84, 92, 100);
}
.el-header{
  position: relative;
  background-color: #1a6fda;
}
.member{
  color: white;
  position: absolute;
  right: 120px;
  top:20px
}
.el-button{
  position: absolute;
  right: 20px;
  top:15px
}
</style>